<template>
    <div class="nav-bar">
        <!-- 左边 -->
        <div class="left" @click="$router.back()">
            <slot name="left"></slot>
            <!-- 使用方式 -->
            <!-- <template #left><i class="iconfont icon-zuojiantou"></i></template> -->
        </div>

        <!-- 中间 -->
        <div class="center">
            <slot></slot>
            <!-- 使用方式 -->
            <!-- <template #default>三叉戟商城</template> -->
        </div>

        <!-- 右边 -->
        <div class="right">
            <i @click="$router.push('/search')" class="iconfont icon-sousuo" style="padding-right: 10px;"></i>
            <i class="iconfont icon-tianjia" @click="showDropdownMenu"></i>
        </div>

        <!-- 下拉菜单区域开始 -->
        <div class="dropdown-menu-wrap" v-if="isShowDropdownMenu">
            <i class="icon iconfont icon-sanjiaoxing"></i>
            <div class="dropdown-menu-item" v-for="(item, index) in menus" :key="index" @click="$router.push(item.url)">
                <i :class="`iconfont icon-${item.icon}`"></i>
                <div class="name">{{ item.name }}</div>
            </div>

            <!-- 扫一扫区域开始 -->
            <div class="dropdown-menu-item" @click="handlerScanner">
                <i class="iconfont icon-saoyisao"></i>
                <div class="name">扫一扫</div>
            </div>
        </div>

        <!-- 扫一扫弹层开始 -->
        <van-popup
            v-model:show="scannerPopup"
            position="bottom"
            closeable
            round
            :style="{ height: '45%' }"
        >
            <div class="popup-wrap">
                <div class="title-box">扫一扫</div>
                <div class="scanner-box">
                    <TridentScanner :qrbox="250" 
                        :fps="10" 
                        style="width: 200px;"
                        @scanResult="onScan"
                    />
                </div>
            </div>
        </van-popup>
        <!-- 扫一扫弹层结束 -->
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 菜单类型
type Menu = {
    icon: string
    name: string
    url: string
}
withDefaults(defineProps<{
    menus?: Menu[]
}>(), {
    menus: () => [
        {
            icon: 'qunliao',
            name: '发起群聊',
            url: '/startGroupChat'
        },
        {
            icon: 'xinpengyou',
            name: '添加朋友',
            url: '/addFriend'
        }
    ]
})

const isShowDropdownMenu = ref(false)

const showDropdownMenu = () => {
    isShowDropdownMenu.value = !isShowDropdownMenu.value
}

// ----------------- 扫一扫功能开始 -----------------
const scannerPopup = ref<boolean>(false)
const handlerScanner = () => {
    scannerPopup.value = true
    isShowDropdownMenu.value = false
}

const onScan = (decodedText: any, decodedResult: any) => {
    console.log('decodedText =', decodedText);
    console.log('decodedResult =', decodedResult);
}
// ----------------- 扫一扫功能结束 -----------------
</script>

<style lang="scss">
    .nav-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #27BA9B;
        color: #FFFFFF;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 10;
        height: 45px;
        line-height: 45px;
        text-align: center;
        box-shadow: 0 2px 0px rgba(100, 100, 100, 0.1);

        .dropdown-menu-wrap {
            height: 162px;
            width: 160px;
            background-color: #4C4C4C;
            position: absolute;
            top: 55px;
            right: 10px;
            border-radius: 5px;
            .icon {
                position: absolute;
                top: -25px;
                right: 14px;
                color: #4C4C4C;
            }
            .dropdown-menu-item {
                display: flex;
                padding: 5px 10px 5px 20px;
                .iconfont {
                    color: #fff;
                    font-size: 20px;
                    width: 20px;
                }

                &:last-child .name {
                    border-bottom: none;
                }
                .name {
                    flex: 1;
                    display: flex;
                    justify-content: flex-start;
                    margin-left: 10px;
                    border-bottom: 1px solid #585858;
                }
            }
        }

        .popup-wrap {
            .title-box {
                color: #27BA9B;
                border-bottom: 1px solid #e1e0e0
            }
            .scanner-box {
                margin-top: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
    .left, .right {
        width: 80px;
    }
    .left {
        .iconfont {
            font-size: 25px;
        }
    }
    .center {
        flex: 1;
        font-size: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .right {
        width: 100px;
        .iconfont {
            font-size: 25px;
        }
    }
</style>
